<template>
  <view class="skeleton-item" :style="wrapperStyle">
    <!-- 图片 -->
    <template v-if="images">
      <view
        class="skeleton-image"
        v-for="(item, itemIndex) in images"
        :key="itemIndex"
        :class="[imageShape]"
        :style="{ width: imageWidth, height: imageHeight || imageWidth}"
      ></view>
    </template>

    <!-- 标题 -->
    <view class="skeleton-titles" v-if="titles || rows">
      <view
        class="skeleton-title-item"
        v-for="(item, itemIndex) in titleList"
        :key="itemIndex"
        :style="{ width: item.width, height: titleheight }"
      ></view>

      <!-- 段落 -->
      <view class="skeleton-rows" v-if="rows">
        <view
          class="skeleton-row-item"
          v-for="(item, itemIndex) in rowList"
          :key="itemIndex"
          :style="{ width: item.width, height: rowHeight }"
        ></view>
      </view>
    </view>
    
  </view>
</template>

<script>
const DEFAULT_ROW_WIDTH = '100%'
const DEFAULT_LAST_ROW_WIDTH = '60%'
const DEFAULT_TITLE_WIDTH = '20%'

export default {
  name: 'skeleton-item',
  props: {
		images:{ // 图片数
			type: Number
    },
    imageWidth: {
      type: String
    },
    imageHeight: {
      type: String
    },
    imageShape: { // square | round | curve
      type: String,
      default: 'curve'
    },
    titles: {
      type: Number,
    },
    titleWidth: {
      type: [Array, String]
    },
    titleheight: {
      type: String,
      default: '20px'
    },
    rowHeight: {
      type: String,
      default: '20px'
    },
    rows: {
      type: Number,
      default: 0,
    },
    rowWidth: { // 段落宽度
      type: [Array, String]
    },
    wrapperStyle: {
      type: String
    }
  },
  data() {
    return {
    }
  },
  computed: {
    rowList() {
      let list = []
      if (this.rows <= 0) return list

      let widthConfigArray = this.rowWidth instanceof Array

      for (let i = 0; i < this.rows; i++) {
        let width = widthConfigArray ? this.rowWidth[i] : this.rowWidth

        if (!width) {
          let lastRow = i === this.rows - 1 && i !== 0

          width = lastRow ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH 
        }

        list.push({ width })
      }
      return list
    },

    titleList() {
      let list = []
      if (this.titles <= 0) return list

      let widthConfigArray = this.titleWidth instanceof Array

      for (let i = 0; i < this.titles; i++) {
        let width = widthConfigArray && this.titleWidth[i] || this.titleWidth || DEFAULT_TITLE_WIDTH

        list.push({ width })
      }
      return list
    }
  }
}
</script>

<style scoped>
.skeleton-item {
  display: flex;
  margin: 20rpx 0;
  
  --bg-color: #f2f3f5;
  --row-margin-top: 20rpx;
}

.skeleton-image {
  flex-shrink: 0;
  background: var(--bg-color);
  margin-right: 20rpx;
}

.skeleton-image.round {
  border-radius: 50%;
}

.skeleton-image.curve {
  border-radius: 16rpx;
}

.skeleton-titles {
  width: 100%;
}
.skeleton-title-item {
  display: inline-block;
  background-color: var(--bg-color);
  margin-right: 20rpx;
}


.skeleton-rows {
  width: 100%;
}
.skeleton-row-item {
  background-color: var(--bg-color);
}
.skeleton-row-item:not(:first-child) {
  margin-top: var(--row-margin-top);
}

.skeleton.animate {
  animation: skeleton-blink 1.2s ease-in-out infinite;
}

@keyframes skeleton-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>
